<template>
	<div class="edit-h5">
		<u-navbar placeholder title="群成员" autoBack></u-navbar>
		<main class="main">
			<div class="member">
				<ul class="list-uniapp">
					<div class="title">群主</div>
					<li class="list-item">
						<aside class="aside" @click="handleMemberProfileShow(member)">
							<Avatar class="read-status-avatar" useSkeletonAnimation :url="member.avatar || ''"
								size="90rpx" />
							<span class="name">{{ member.nick || member.userID }}</span>
						</aside>
					</li>

				</ul>
				<ul class="list-uniapp">
					<div class="title">管理员</div>
					<u-swipe-action>
						<u-swipe-action-item :options="options" @click="selectClick($event,item)" v-for="(item, index) in adminList"
							:key="index">
							<aside class="aside" @click="handleMemberProfileShow(item)">
								<Avatar useSkeletonAnimation :url="item.avatar || ''" size="90rpx" />
								<div class="name">{{ item.nick || item.userID }}</div>
							</aside>
						</u-swipe-action-item>
					</u-swipe-action>
					<aside class="aside" @click="addHandleMember()">
						<div class="add">+</div>
						<div class="name">添加管理员</div>
					</aside>

				</ul>
			</div>
		</main>
	</div>
</template>

<script lang="ts" setup>
	import TUIChatEngine, {
		TUITranslateService,
		TUIStore,
		StoreName,
		TUIGroupService
	} from "@tencentcloud/chat-uikit-engine";
	import { TUIGlobal } from "@tencentcloud/universal-api";
	import Avatar from "../../common/Avatar/index.vue";
	import { watchEffect, ref, reactive } from "../../../adapter-vue";
	import { IGroupMember } from "../../../interface";
	import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
	import { checkUserInfo } from "../../../utils/checkLogin";
	const groupID = ref<any>('')
	const member : any = ref({})
	const adminList : any = ref([])
	const memberList:any=ref([])
	const options = reactive([{
		text: '取消管理员',
		style: {
			backgroundColor: '#ff0012'
		}
	}])
	onLoad((options : any) => {
		groupID.value = options.groupID
	})
	onShow(() => {
		TUIStore.watch(StoreName.CUSTOM, {
			IMuserInfo: (data : any) => {
				if (data) {
					TUIGroupService.switchGroup(groupID.value);
					getCurrentGroupMemberList()
					checkUserInfo()
				}

			}
		})
	})
	const selectClick = async (e: any,user) => {
		if(e.index===0){
			let role = TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER
			const options: any = {
			  groupID: groupID.value,
			  userID: user.userID,
			  role,
			};
			await TUIGroupService.setGroupMemberRole(options);
		}

	};
	const addHandleMember = () => {
		if(!memberList.value.length){
			return uni.showToast({
				title:'没有普通群成员可设置为管理员',
				icon:'none'
			})
		}
		TUIGlobal?.navigateTo({
			url: '/pages/TUIKit/components/TUIGroup/manage-group/manage-userList?title=添加管理员&GroupID=' + groupID.value + '&type=addAdmin&memberList='+JSON.stringify(memberList.value)
		})
	}
	const getCurrentGroupMemberList = () => {
		TUIStore.watch(StoreName.GRP, {
			currentGroupMemberList: (list : Array<IGroupMember>) => {
				adminList.value = []
				memberList.value=[]
				Array.from(list).map((item : any) => {
					switch (item?.role) {
						// 群主
						case TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER:
							member.value = item;
							break;
						// 群管理
						case TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN:
							adminList.value.push(item);
							break;
						// 群成员
						case TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER:
							memberList.value.push(item);
							break;
						default:
							break;
					}
					return item;
				});
			},
		});
	}





	const handleMemberProfileShow = (user : any) => {
		emits("handleMemberProfileShow", user);
	};
</script>

<style lang="scss" scoped>
	@import url("../../../assets/styles/common.scss");

	.member {
		flex: 1;

		.list-uniapp {
			.aside {
				padding: 24rpx;
				display: flex;
				align-items: center;
				background: #fff;

				.name {
					margin-left: 8px;
					font-weight: 400;
					font-size: 14px;
					color: #000000;
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.add {
					width: 90rpx;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 100%;
					justify-content: center;
					align-items: center;
					background: #ececec;
					display: flex;
					font-size: 42rpx;
					font-weight: bold;
					color: #999;
				}
			}
		}

		.title {
			padding: 12rpx 24rpx;
			box-sizing: border-box;
			color: #777;
			font-size: 30rpx;
		}


	}


	.loadmore {
		padding-bottom: 1rpx;
	}
</style>